
<template>
	<view class="content">
		<!-- 头部 -->
		  <view class="text-center topHeader" >
		      <image :src='userFace' mode="aspectFit" class="userFace"></image>
		      <view class="userName">{{userInfo.name}}</view>
		      <view class="jzName">{{userInfo.plasmaStationName}}</view>
		  </view>
		
		  <!-- 菜单 -->
		  <view class="menu" v-if="menuList.length>0">
		    <view v-for="item in menuList" class="menu-item" :key="item.name" @click='goNavigate(item)' >
		      <text class="iconfont" :class="item.icon"></text>
		      <view>{{item.name}}</view>
		    </view>
		  </view>
		
		<!-- 我的菜单 -->
		<view class="myMenu" v-if="myMenu.length>0">
		    <view v-for="item in myMenu" class="myMenu-item" :key="item.name" @click='goNavigate(item)'>
		      <text class="iconfont" :class="[item.icon,item.style]"></text>
		      <view class="title">{{item.name}}</view>
		      <text class="iconfont icon-jiantouarrow487 cl-9c9191"></text>
		    </view>
		</view>
		<view class="p-2 mt-5">
			<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="loginOut">退出登录</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	import {mapState,mapMutations} from 'vuex';
	import userFace from '@/static/images/userpic.png'
	export default {
		data() {
			return {
				userFace,
				userRole:[],
				userInfo:{}
			}
		},
		computed:{
			...mapState({
				menuList:state=>state.role.indexMenu,
				myMenu:state=>state.role.myMenu
			})
		},
		onShow(){
			this.getRole();
			this.getUserInfo()
		},
		methods: {
			...mapMutations(['getRoleMenu','logout']),
			/**获取角色接口*/ 
			getRole(){
				this.$H.get(api.getRole).then(res=>{
					this.getRoleMenu(res.content);
				})
			},
			goNavigate(item){
				uni.navigateTo({
					url:item.url
				})
			},
			getUserInfo(){
				this.$H.get(api.userInfo).then(res=>{
					this.userInfo = res.content;
				})
			},
			/**退出登录*/ 
			loginOut(){
				let self= this;
				uni.showModal({
				    title: '提示',
				    content: '是否退出登录？',
				    success: function (res) {
				        if (res.confirm) {
							self.$H.get(api.loginOut).then(res=>{
								self.logout();
								uni.showToast({
									title:'退出登录成功'
								})
								uni.redirectTo({
									url:'/pages/login/login'
								})
								
							})
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.topHeader{
	  background: linear-gradient(45deg,#fc8630,#f45c59,#ec4d49);
	  padding:100rpx 0;
	}
	.userFace{
	  width:160rpx;
	  height:160rpx;
	  display: block;
	  border-radius: 50%;
	  margin:auto;
	}
	.userName{
	  font-size: 34rpx;
	  color:#fff;
	}
	.jzName{
	  font-size: 26rpx;
	  color:rgba(255,255,255,.8);
	}
	.menu{
	  background: #fff;
	  display: flex;
	  width:690rpx;
	  margin:auto;
	  justify-content: space-around;
	  box-shadow: 0rpx 6rpx 16rpx rgba(236,77,73,.4);
	  padding:28rpx 0;
	  margin-top:-80rpx;
	  border-radius: 16rpx;
	}
	.menu .menu-item{
	  text-align: center;
	  width:25%;
	  color:#250908;
	}
	.menu .menu-item .iconfont{
	  color:#f45c59;
	  font-size: 60rpx;
	  line-height: 1;
	}
	.myMenu-item{
	  display: flex;
	  justify-content: space-between;
	  padding: 20rpx;
	  background: #fff;
	  margin-top:32rpx;
	  line-height: 68rpx;
	}
	.myMenu-item .title{
	  width:540rpx;
	  text-align: left;
	}
	.myMenu-item .iconfont{
	 text-align: center;
	 width:68rpx;
	 font-size: 48rpx;
	}
	.myMenu-item .iconfont.icon-jiantouarrow487{
	  text-align: right;
	  font-size: 40rpx;
	}
	.circle-yellow{
	  border-radius: 12rpx;
	  background: #ffc71f;
	  color:#fff;
	  border-top-right-radius: 0;
	  border-bottom-left-radius: 0;
	}
	.circle-blue{
	  border-radius:12rpx;
	  background: #138ce8;
	  color:#fff;
	  border-top-right-radius: 0;
	  border-bottom-left-radius: 0;
	}
</style>
